<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<link rel="stylesheet" href="fonts/glyphicons/css/glyphicons.css">
	<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/index.css">

</head>
<body>
	<div id="header">
		<div id="top-nav">
			<div class="wrapper">
				<div id="search-box">
					<span class="glyphicon glyphicon-search"></span>
				</div>
				<div id="top-menu">
					<ul>
						<li class="follow-us">关注我们</li>
						<li class="share"><a href="#"><span class="icon icon-facebook"></span></a></li>
						<li class="share"><a href="#"><span class="icon icon-twitter"></span></a></li>
						<li class="share"><a href="#"><span class="icon icon-youtube"></span></a></li>
						<li class="share"><a href="#"><span class="icon icon-google-plus"></span></a></li>
						<li class="btn login">
							<a href="#">
								<span class="glyphicon glyphicon-lock"></span>
								登录
							</a>
						</li> 
						<li class="btn register">
							<a href="#">
								<span class="glyphicon glyphicon-user"></span> 
								注册
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div id="nav">
			<div class="wrapper">
				<h1 class="logo">网上商城</h1>
				<ul class="nav-menu">
					<li class="selected"><a href="index.html">首页</a></li>
					<li><a href="about.html">关于我们</a></li>
					<li class="menu-btn">
						<a href="#">商城 <span class="arrow"></span></a>
						<ul class="sub-menu">
							<li><a href="catalog.html">商品类别</a></li>
							<li><a href="product.html">商品详情</a></li>
							<li><a href="shopcart.html">购物车</a></li>
						</ul>
					</li>
					<li class="menu-btn"><a href="#">博客 <span class="arrow"></span></a>
					<ul class="sub-menu">
							<li><a href="posts.html">Blog Posts</a></li>
							<li><a href="timeline.html">Blog Timeline</a></li>
						</ul>
					</li>
					<li><a href="contact.html">联系我们</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div id="banner">
		<div class="wrapper" style="position: relative;">
			<img src="img/front-home-banner.jpg" alt="">
			<div class="banner-content">
				<h1>FLAT KIT Template</h1>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis vulputate nunc, fermentum blandit eros eleifend a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus, lorem nec molestie pharetra, felis mi vulputate sem, ac vehicula odio augue in odio. Quisque cursus dui
				</p>
				<a href="#" class="check-out"><span class="glyphicon glyphicon-menu-right"></span> check it out</a>
				<a href="#" class="buy-now"><span class="glyphicon glyphicon-usd"></span> buy it now</a>
			</div>
		</div>		
	</div>
	<div id="awesome">
		<span id="text-primary">Awesome</span>
		<span id="text-features">Features</span>
		<span id="hidden-phone">Lovely headline here</span>
	</div>
	<div id="content" class="wrapper">
		<div id="slogan">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley. of.type and scrambled it to
		</div>
		<ul id="features">
			<li>
			<span class="glyphicon glyphicon-time"></span>
			<h3>Fully Responsive</h3>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley. of.type and scrambled it to</p>
			<a href="#">learn more</a>
			</li>
			<li>
			<span class="glyphicon glyphicon-phone"></span>
			<h3>Mobile Friendly</h3>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley. of.type and scrambled it to</p>
			<a href="#">learn more</a>
			</li>
			<li class="selected">
			<span class="glyphicon glyphicon-cutlery"></span>
			<h3>Easy Customizable</h3>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley. of.type and scrambled it to</p>
			<a href="#">learn more</a>
			</li>
			<li>
			<span class="glyphicon glyphicon-cutlery"></span>
			<h3>Unlimited colors</h3>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley. of.type and scrambled it to</p>
			<a href="#">learn more</a>
			</li>
		</ul>
		<div id="follow-us">
			<h3>Follow us on:</h3>
			<ul id="follow-list">
				<li class="selected"><a href="#"><span class="icon icon-facebook-sign"></span><br>facebook</a></li>
				<li><a href="#"><span class="icon icon-google-plus-sign"></span><br>google+</a></li>
				<li><a href="#"><span class="icon icon-twitter-sign"></span><br>twitter</a></li>
				<li><a href="#"><span class="icon icon-tumblr-sign"></span><br>forrst</a></li>
				<li><a href="#"><span class="icon icon-share-sign"></span><br>skype</a></li>
			</ul>
		</div>
	</div>
	<h3 id="testimonials" class="wrapper">
		<span class="glyphicon glyphicon-comment"></span>
		Testimonials
	</h3>
	<div id="user-list" class="wrapper">
		<div class="user">
			<span class="glyphicon glyphicon-user"></span>
			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
			<p class="by">by&nbsp<a href="#">john&nbspdoe</a></p>
		</div>
		<div class="user">
			<span class="glyphicon glyphicon-user"></span>
			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
			<p class="by">by&nbsp<a href="#">jane&nbspdoe</a></p>
		</div>
	</div>
	<div id="bner" class="wrapper">
		<div class="bner-left">
			<h2>Give your ADMIN a new look <strong>Today</strong></h2>
			<p>Unlimited Colors | 420+ Icons Included | Fully Responsive | Duzines of Pages</p>
		</div>
		<a href="#" class="bner-right">
			<span class="glyphicon glyphicon-usd"></span>
			<p>Buy it now!</p>
			<p>on ThemeForest.net</p>
		</a>
	</div>
	<div id="footer">
		<div class="wrapper">
			<div class="foot-top">
				<div class="quick-links left">
					<h4>QUICK LINKS</h4>
					<ul>
						<li><a>Home</a></li>
						<li><a>About</a></li>
						<li><a>pricing</a></li>
						<li><a>Blog</a></li>
						<li><a>Contact</a></li>
					</ul>
				</div>
				<div class="about left">
					<h4>ABOUT</h4>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting dustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
				</div>
				<div class="out-blog left">
					<h4>OUR BLOG</h4>
					<ul>
						<li><a>What is Lorem Ipsum?</a></li>
						<li><a>What is Lorem Ipsum?</a></li>
						<li><a>What is Lorem Ipsum?</a></li>
						<li><a>What is Lorem Ipsum?</a></li>
						<li><a>What is Lorem Ipsum?</a></li>
					</ul>
				</div>
				<div class="contact right">
					<h4>CONTACT</h4>
					<ul>
						<li><span class="glyphicon glyphicon-phone"></span>01&nbsp230&nbsp1958</li>
						<li><span class="glyphicon glyphicon-envelope"></span>contact@mosaicpro.biz</li>
					</ul>
				</div>
				<div class="social right">
					<h4>SOCIAL</h4>
					<ul>
						<li><a href="#" class="icon icon-facebook-sign selected"></a></li>
						<li><a href="#" class="icon icon-twitter-sign"></a></li>
						<li><a href="#" class="icon icon-linkedin-sign"></a></li>
						<li><a href="#" class="icon icon-google-plus-sign"></a></li>
						<li><a href="#" class="icon icon-edit-sign"></a></li>
					</ul>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="copyright">
				<span>© 2013 -</span>
				<a href="#"> mosaicpro.biz</a>
				<span class="text-right">FLAT KIT</span>
			</div>
		</div>
	</div>
</body>
</html>
<!-- icon icon-facebook-sign -->
